<template>
  <div class="home">

    <main class="main-content">
      <section class="education-sections">
        <!-- 德育板块 -->
        <div class="section-group">
          <div class="section">德育</div>
<!--          <div class="section-content">-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/dsxx.fc5ead81.png?x-eos-process=image/format,webp" link="/moral?section=partyHistory"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/agzy.e309098b.png?x-eos-process=image/format,webp" link="/moral?section=patriotism"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/xffz.d022e1f8.png?x-eos-process=image/format,webp" link="/moral?section=constitution"/>-->
<!--            </div>-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/pdjy.9af92200.png?x-eos-process=image/format,webp" link="/moral?section=moralEducation"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/kcjx.968ae85f.png?x-eos-process=image/format,webp" link="/moral?section=politicalCourse"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/yxctwh.3b9b0855.png?x-eos-process=image/format,webp" link="/moral?section=traditionalCulture"/>-->
<!--            </div>-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/smyaq.aaf4e632.png?x-eos-process=image/format,webp" link="/moral?section=lifeSafety"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/xljk.cd9755f3.png?x-eos-process=image/format,webp" link="/moral?section=mentalHealth"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/stwm.f5cee18e.png?x-eos-process=image/format,webp" link="/moral?section=ecoCivilization"/>-->
<!--            </div>-->
<!--          </div>-->
          <div class="section-content">
            <div class="row" v-if="dyList.length > 0">
              <div v-for="(item, index) in dyList" :key="index">
                <EducationBox
                    :backgroundImage="item.imageUrl"
                :link="item.link"
                />
              </div>
            </div>
          </div>


        </div>
        <!-- 课程教学板块 -->
        <div class="content">
          <h2 class="section">课程教学</h2>
        </div>
        <div class="kade">
          <div class="kade-item primary">
            <h4 class="kade-title">小学课程</h4>
            <p class="kade-description">国家优质课程资源</p>
            <div class="grade-buttons">
              <button>一年级</button>
              <button>二年级</button>
              <button>三年级</button>
              <button>四年级</button>
              <button>五年级</button>
              <button>六年级</button>
            </div>
            <img class="kade-img" src="https://x-area-edu-web.ykt.eduyun.cn/img/xiaoxue-80cf0a91.png?x-eos-process=image/format,webp" alt>
          </div>
          <div class="space-between-courses"></div>
          <div class="kade-item middle">
            <h4 class="kade-title">初中课程</h4>
            <p class="kade-description">国家优质课程资源</p>
            <div class="grade-buttons">
              <button>七年级</button>
              <button>八年级</button>
              <button>九年级</button>
            </div>
            <img class="kade-img" src="https://x-area-edu-web.ykt.eduyun.cn/img/chuzhong-605ae25d.png?x-eos-process=image/format,webp" alt>
          </div>
          <div class="space-between-courses"></div>
          <div class="kade-item senior">
            <h4 class="kade-title">高中课程</h4>
            <p class="kade-description">国家优质课程资源</p>
            <div class="grade-buttons">
              <button>高中阶段</button>
            </div>
            <img class="kade-img" src="https://x-area-edu-web.ykt.eduyun.cn/img/gaozhong-d64058e7.png?x-eos-process=image/format,webp" alt>
          </div>
        </div>
        <!-- 体育板块 -->
        <div class="section-group">
          <div class="section">体育</div>
<!--          <div class="section-content">-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E4%B8%8E%E5%81%A5%E5%BA%B7%20%E8%AF%BE%E7%A8%8B_1667186152026.png?x-eos-process=image/format,webp" link="/sports"/>-->
<!--              <EducationBox backgroundImage="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E8%BF%90%E5%8A%A8%E6%8A%80%E8%83%BD_1667186161386.png?x-eos-process=image/format,webp" link="/sports"/>-->
<!--              <EducationBox backgroundImage="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E6%B4%BB%E5%8A%A8_1667186182068.png?x-eos-process=image/format,webp" link="/sports"/>-->
<!--              <EducationBox backgroundImage="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E5%81%A5%E5%BA%B7%E6%9C%8D%E5%8A%A1_1667186197530.png?x-eos-process=image/format,webp" link="/sports"/>-->
<!--            </div>-->
<!--          </div>-->
          <div class="section-content">
            <div class="row" v-if="tyList.length > 0">
              <div v-for="(item, index) in tyList" :key="index">
                <EducationBox
                    :backgroundImage="item.imageUrl"
                    :link="item.link"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 美育板块 -->
        <div class="section-group">
          <div class="section">美育</div>
<!--          <div class="section-content">-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E8%AF%BE%E7%A8%8B_1667186257424.png?x-eos-process=image/format,webp" link="/arts"/>-->
<!--              <EducationBox backgroundImage="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%8A%80%E8%83%BD_1667186273795.png?x-eos-process=image/format,webp" link="/arts"/>-->
<!--              <EducationBox backgroundImage="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E8%89%BA%E6%9C%AF%E6%B4%BB%E5%8A%A8_1667186286876.png?x-eos-process=image/format,webp" link="/arts"/>-->
<!--            </div>-->
<!--          </div>-->
          <div class="section-content">
            <div class="row" v-if="myList.length > 0">
              <div v-for="(item, index) in myList" :key="index">
                <EducationBox
                    :backgroundImage="item.imageUrl"
                    :link="item.link"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 劳动教育板块 -->
        <div class="section-group">
          <div class="section">劳动教育</div>
<!--          <div class="section-content">-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/1-1.168d6aa7.png?x-eos-process=image/format,webp" link="/labor"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/2-2.5d68ecbd.png?x-eos-process=image/format,webp" link="/labor"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/3-3.bfb5192b.png?x-eos-process=image/format,webp" link="/labor"/>-->
<!--            </div>-->
<!--          </div>-->
          <div class="section-content">
            <div class="row" v-if="ldList.length > 0">
              <div v-for="(item, index) in ldList" :key="index">
                <EducationBox
                    :backgroundImage="item.imageUrl"
                    :link="item.link"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 课后服务板块 -->
        <div class="section-group">
          <div class="section">课后服务</div>
<!--          <div class="section-content">-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/kpjy.0e77669e.png?x-eos-process=image/format,webp" link="/afterschool"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/tydl.6cd2c177.png?x-eos-process=image/format,webp" link="/afterschool"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/whys.5b8f7997.png?x-eos-process=image/format,webp" link="/afterschool"/>-->
<!--            </div>-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/jdyd.26ba7176.png?x-eos-process=image/format,webp" link="/afterschool"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/yxsj.8a57065e.png?x-eos-process=image/format,webp" link="/afterschool"/>-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/ysjy.ac3bbe09.png?x-eos-process=image/format,webp" link="/afterschool"/>-->
<!--            </div>-->
<!--          </div>-->
          <div class="section-content">
            <div class="row" v-if="khList.length > 0">
              <div v-for="(item, index) in khList" :key="index">
                <EducationBox
                    :backgroundImage="item.imageUrl"
                    :link="item.link"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 教材板块 -->
        <div class="section-group">
          <div class="section">教材</div>
<!--          <div class="section-content">-->
<!--            <div class="row">-->
<!--              <EducationBox backgroundImage="https://basic.smartedu.cn/img/c-2.4e1dfffa.png?x-eos-process=image/format,webp" />-->
<!--            </div>-->
<!--          </div>-->
          <div class="section-content">
            <div class="row" v-if="jcList.length > 0">
              <div v-for="(item, index) in jcList" :key="index">
                <EducationBox
                    :backgroundImage="item.imageUrl"
                    :link="item.link"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 其他板块... -->
      </section>
    </main>
    <footer class="footer">
      <div class="stats">
        今天已有m人与你一起学习，你们共浏览了n次。
      </div>
    </footer>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import EducationBox from '@/components/EducationBox.vue';
import {getFileListApi, getResByTypeApi} from "@/api/indexResApi.ts";
import {onMounted, ref} from "vue";

export default {
  components: {
    NavBar,
    EducationBox,
  },
  setup() {
    const dyList = ref([]);  // 使用 ref 来声明响应式数据
    const tyList = ref([]);  // 使用 ref 来声明响应式数据
    const myList = ref([]);  // 使用 ref 来声明响应式数据
    const ldList = ref([]);  // 使用 ref 来声明响应式数据
    const khList = ref([]);  // 使用 ref 来声明响应式数据
    const jcList = ref([]);  // 使用 ref 来声明响应式数据

    // 在组件挂载时获取图片列表
    const fetchImagesDy = async () => {
      try {
        // const response = await getFileListApi();
        const response = await getResByTypeApi(1);
        // 假设 API 返回的图片列表格式为
        // response.data = [{ imageUrl: '图片地址', link: '链接' }, ...]
        dyList.value = response.data.map(item => ({
          imageUrl: item.url,  // 获取每个图片的 URL
          link: item.link,  // 获取每个图片的链接
        }));
      } catch (error) {
        console.error("获取图片列表失败:", error);
      }
    };
    const fetchImagesTy = async () => {
      try {
        // const response = await getFileListApi();
        const response = await getResByTypeApi(2);
        // 假设 API 返回的图片列表格式为
        // response.data = [{ imageUrl: '图片地址', link: '链接' }, ...]
        tyList.value = response.data.map(item => ({
          imageUrl: item.url,  // 获取每个图片的 URL
          link: item.link,  // 获取每个图片的链接
        }));
      } catch (error) {
        console.error("获取图片列表失败:", error);
      }
    };
    const fetchImagesMy = async () => {
      try {
        // const response = await getFileListApi();
        const response = await getResByTypeApi(3);
        // 假设 API 返回的图片列表格式为
        // response.data = [{ imageUrl: '图片地址', link: '链接' }, ...]
        myList.value = response.data.map(item => ({
          imageUrl: item.url,  // 获取每个图片的 URL
          link: item.link,  // 获取每个图片的链接
        }));
      } catch (error) {
        console.error("获取图片列表失败:", error);
      }
    };
    const fetchImagesLd = async () => {
      try {
        // const response = await getFileListApi();
        const response = await getResByTypeApi(4);
        // 假设 API 返回的图片列表格式为
        // response.data = [{ imageUrl: '图片地址', link: '链接' }, ...]
        ldList.value = response.data.map(item => ({
          imageUrl: item.url,  // 获取每个图片的 URL
          link: item.link,  // 获取每个图片的链接
        }));
      } catch (error) {
        console.error("获取图片列表失败:", error);
      }
    };
    const fetchImagesKh = async () => {
      try {
        // const response = await getFileListApi();
        const response = await getResByTypeApi(5);
        // 假设 API 返回的图片列表格式为
        // response.data = [{ imageUrl: '图片地址', link: '链接' }, ...]
        khList.value = response.data.map(item => ({
          imageUrl: item.url,  // 获取每个图片的 URL
          link: item.link,  // 获取每个图片的链接
        }));
      } catch (error) {
        console.error("获取图片列表失败:", error);
      }
    };
    const fetchImagesJc = async () => {
      try {
        // const response = await getFileListApi();
        const response = await getResByTypeApi(6);
        // 假设 API 返回的图片列表格式为
        // response.data = [{ imageUrl: '图片地址', link: '链接' }, ...]
        jcList.value = response.data.map(item => ({
          imageUrl: item.url,  // 获取每个图片的 URL
          link: item.link,  // 获取每个图片的链接
        }));
      } catch (error) {
        console.error("获取图片列表失败:", error);
      }
    };

    onMounted(() => {
      fetchImagesDy();  // 组件挂载后调用 API 获取数据
      fetchImagesTy();
      fetchImagesMy();
      fetchImagesLd();
      fetchImagesKh();
      fetchImagesJc();
    });

    return {
      dyList,
      tyList,
      myList,
      ldList,
      khList,
      jcList,
    };
  },
};
</script>

<style scoped>
.home {
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #346af3;
  color: white;
  padding: 10px 20px;
}

.logo img {
  width: 100px; /* Adjust based on actual image size */
}

.user-info {
  display: flex;
  align-items: center;
}

.logout-button {
  background-color: #f44336; /* Red background */
  color: white; /* White text */
  border: none; /* No border */
  padding: 5px 10px; /* Padding */
  cursor: pointer; /* Cursor changes to pointer */
  border-radius: 3px; /* Rounded corners */
}

.logout-button:hover {
  background-color: #d32f2f; /* Darker on hover */
}

.main-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
}

.education-sections {
  width: 100%;
}

.section-group {
  width: 100%;
  margin-bottom: 20px;
}

.section {
  cursor: default; /* Removes default cursor */
  padding: 10px;
  text-align: left; /* Aligns text to the left */
  width: 100%;
  margin-bottom: 10px;
  background-color: transparent;
  color: #346af3;
  font-weight: bold;
  font-size: 24px; /* Larger font size */
}

.section-content {
  display: flex;
  /*flex-wrap: wrap;*/
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
  align-items: center;
}

.row {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  width: 100%;
}
.box-item {
  flex: 1 1 calc(33.33% - 16px); /* 每个项占据大约 1/3 宽度，并考虑间距 */
  min-width: 200px;             /* 最小宽度，避免过小 */
  box-sizing: border-box;
}

.education-box {
  border: none; /* Removes border */
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
  background-color: white;
  text-align: center;
  flex: 1;
  min-width: 0;
  font-size: 18px; /* Larger font size for titles */
  background-size: cover; /* Covers the entire element */
  background-position: center; /* Centers the background */
  background-repeat: no-repeat; /* No repeat */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow at the bottom */
  overflow: hidden;
  position: relative;
}

.zoom-box {
  position: relative;
  overflow: hidden;
}

.zoom-box .inner-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoom-box .education-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.zoom-box:hover .education-box {
  transform: scale(1.2); /* Scales up on hover */
}

.footer {
  text-align: center;
  padding: 10px 0;
  background-color: #f2f2f2;
}

.stats {
  text-align: center;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: center;
  }

  .user-info {
    margin-top: 10px;
  }

  .main-content {
    flex-direction: column;
  }

  .education-sections {
    flex-direction: column;
    align-items: center;
  }

  .section-content {
    flex-direction: column;
    align-items: center;
  }

  .row {
    flex-direction: column;
  }

  .education-box {
    width: 100%;
  }
}

.header {
  display: flex;
  justify-content: center;
  background: none;
  margin-top: 20px;
  margin-left: 20%;
  margin-right: 20%;
}
.back {
  background-color: #f8f8f8;
}
.content {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.title {
  font-size: 24px;
  font-weight: bold;
}
.banner-img {
  max-width: 130%;
  height: auto;
  border-radius: 8px;
}
.kade {
  display: flex;
  justify-content: space-around;
  margin: 20px auto;
  padding: 20px 0;
  max-width: 1200px;
}
.kade-item {
  width: 30%;
  padding: 20px;
  background-color: #f4f8ff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.kade-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.kade-description {
  color: #666;
  margin-bottom: 10px;
}
.grade-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.grade-buttons button {
  background-color: #b0d1ff;
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
  color: #333; /* 初始字体颜色 */
}
.grade-buttons button:hover {
  background-color: #007bff; /* 悬停时背景色 */
  color: white; /* 悬停时字体颜色 */
}
.kade-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  height: auto;
}
.primary {
  background-color: #e4f2ff;
}
.middle {
  background-color: #ecfaf4;
}
.senior {
  background-color: #fff5e8;
}

.space-between-courses {
  height: 20px; /* 可以根据需要调整间隔的高度 */
  width: 20px;
}

.education-box {
  /* ... 其他样式 ... */
  overflow: hidden; /* 确保放大效果不超出容器边界 */
  position: relative; /* 为背景图片的定位做准备 */
  background-size: cover; /* 确保背景图片覆盖整个容器 */
  background-position: center; /* 确保背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  transition: transform 0.3s ease; /* 平滑变换效果 */
}

.education-box:hover {
  transform: scale(1.02); /* 鼠标悬停时放大2% */
}

</style>